<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    @close="handleClose"
    :width="[Wwidth > 800 ? '30%' : '80%']"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="70px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="分类ID" prop="lockclassid">
        <el-input v-model="ruleForm.lockclassid" />
      </el-form-item>
      <el-form-item label="分类名称" prop="lockclassname">
        <el-input v-model="ruleForm.lockclassname" />
      </el-form-item>
      <el-form-item label="押金" prop="depositpermit">
        <el-input v-model="ruleForm.depositpermit" />
      </el-form-item>
      <el-form-item label="起步价" prop="flagfall">
        <el-input v-model="ruleForm.flagfall" />
      </el-form-item>
      <el-form-item label="收费/h" prop="charging">
        <el-input v-model="ruleForm.charging" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch, toRaw } from 'vue'
import { addrules, RuleUpdateById } from '@/api/lockrule'
import { ElMessage } from 'element-plus'
const emits = defineEmits(['update:modelValue', 'initGetTab'])
const ruleFormRef = ref(null)
const ruleForm = ref({
  lockclassid: '',
  lockclassname: '',
  depositpermit: '',
  flagfall: '',
  charging: ''
})

const Wwidth = ref()
const Wheight = ref()
// 我的电脑的浏览器窗口尺寸:宽度：1535;高度：794
const getwindow = () => {
  Wwidth.value = document.documentElement.clientWidth
  Wheight.value = document.documentElement.clientHeight
}
getwindow()
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogTableValue: {
    type: Object,
    default: () => {}
  }
})

const handleClose = () => {
  emits('update:modelValue', false)
}

const handleOk = async () => {
  if (props.dialogTitle === '编辑规则') {
    await RuleUpdateById(ruleForm.value)
    ElMessage({
      type: 'success',
      message: '更新成功'
    })
  } else if (props.dialogTitle === '新增规则') {
    await addrules(ruleForm.value)
    ElMessage({
      type: 'success',
      message: '添加成功'
    })
  }
  emits('initGetTab')
  handleClose()
}
watch(
  () => props.dialogTableValue,
  () => {
    const ValueObj = toRaw(props.dialogTableValue)
    console.log('ValueObj')
    console.log(ValueObj)
    ruleForm.value = props.dialogTableValue
    console.log(ruleForm.value)
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped></style>
